<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>欢迎页面</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/report/charts.js"></script>
<style type="text/css">
	body{
		overflow-x:hidden;
		font-size:12px;
		margin:0px;
		float:left;
	}
	li{
		color:#666999;
	}
	li h3{
		color:#666;
		font-weight: lighter;
	}
	h2{
		color:#555;
		font-stretch: normal;
		font-weight:normal;
	}
	a{
		color: grey;
	}
	.tab {padding:0px; text-align:left;}
    .tab ul, li { margin:0px; padding:0px; list-style:none; text-align:left;}
    .tab ul li { display: inline-block; zoom: 1; *display: inline; background:#8097c1; color:#fff; text-align:center; padding:5px 10px; cursor:pointer;margin-right: 1px;}
    .tab .active{ background:#2888d6; font-weight:bold;}
    .tab_content { text-align:left; border:1px solid #B9D3EE; padding:5px;width:95%;height:500px;display: none}
</style>
<% if(request.getSession().getAttribute(com.wlanauth.web.core.SystemConstants.SESSION_OPER_KEY)!=null){  %>
<script type="text/javascript">
var dayChart;//日
var monthChart;
var yearChart;
var currentStatusChart;
var ftpUrl = null;
/**
 * 刷新报表
 */
function refreshChart(type){
	if(type=='realtime'&&currentStatusChart){
		loadCurrentStatusChartData('currentStatusContainer',currentStatusChart);
	} else if(type=='day'&&dayChart){
		loadOctetChartData('octchartContainer_day',dayChart,'day');
	} else if(type=='month'&&monthChart){
		loadOctetChartData('octchartContainer_month',monthChart,'month');
	} else if(type=='year'&&yearChart){
		loadOctetChartData('octchartContainer_year',yearChart,'year');
	}
}
//内部下载
function doFtp(){
	var w=window.open('about:blank');
	if(ftpUrl!=null) {
		w.location = ftpUrl;
		return ;
	}
	$.getJSON('systemProperty!findKey.action?systemProperty.key=SYSTEM_FTP_URL',function(result){
		if(result.success){
			
			if(result.data) {
				ftpUrl = result.data.value;
				w.location = ftpUrl;
				return;
			}
			else {
				alert('暂未配置');
			}
		} else {
			alert('获取下载链接失败:'+result.data);
		}
		w.close();
	});
}
$(document).ready(function() {
	Highcharts.setOptions({    
	    global: {    
	        useUTC: false    
	    }    
	});
	
	$(".tab li").each(function(i){
    	$(this).click((function(index){
    		return function(){
    			if(index>2) return;
    			$(this).addClass("active").siblings("li").removeClass();
        		$(".tab div[class='tab_content']:eq("+index+")").show().siblings("div").hide();
        		if(index==0){
        			if(!dayChart){
        				dayChart = renderOctetChart('octchartContainer_day');
        				currentStatusChart = renderCurrentStatus('currentStatusContainer');
        				setInterval('refreshChart("realtime")',60*1000);
        			}
        			if(!dayChart.init){
        				refreshChart('day');
        			}
					if(!currentStatusChart.init){
						refreshChart("realtime");
					}
        			currentStatusChart.redraw();
        		}
        		if(index==1){
        			if(!monthChart){
        				monthChart = renderOctetChart('octchartContainer_month');
        			}
        			if(!monthChart.init){
        				refreshChart('month');
        			}
        		}
        		if(index==2){
        			if(!yearChart){
        				yearChart = renderOctetChart('octchartContainer_year');
        				
        			}
        			if(!yearChart.init){
        				refreshChart('year');
        			}
        		}
    		}
    	})(i));
    });
	
	$(".tab li:first").click();
	
});


</script>
<%}%>
</head>
<body style="overflow:hidden;">
  <!-- 欢迎信息 -->
<div id="welcomeDiv">
	 <div class="tab" style="z-index:1000px;position: absolute;top:10px;left:10px;width:100%">
        <ul><li>本日</li><li>本月</li><li>本年度</li>
        	<li style="float:right;padding-right:100px;background:none;color:#666999"><a href="javascript:void(0)" onclick="doFtp()" title="内部文件下载">内部文件下载</a></li>
        	</ul>
        <div class="tab_content">
			<div style="font-size:12px;padding:10px;">
				<span id="octchartContainer_day_flag">加载流量信息...</span>
				<span><a href="javascript:void(0)" onclick="refreshChart('day');" style="text-decoration:none;color:#999">刷新</a></span>
			</div>
			<div style="width:100%">
				<div id="octchartContainer_day" style="float:right;width:55%;margin-right:5px;float:left"></div>
				<div id="currentStatusContainer" style="float:left;width:40%;margin-right:5px;"></div>
			</div>
	</div>
        <div class="tab_content">
        	<div style="font-size:12px;padding:10px;">
				<span id="octchartContainer_month_flag">加载流量信息...</span>
				<span><a href="javascript:void(0)" onclick="refreshChart('month');" style="text-decoration:none;color:#999">刷新</a></span>
			</div>
			<div style="width:100%">
				<div id="octchartContainer_month" style="float:right;width:87%;margin-right:5px;float:left"></div>
			</div>
        </div>
        <!-- 年度 -->
        <div class="tab_content">
        	<div style="font-size:12px;padding:10px;">
				<span id="octchartContainer_year_flag">加载流量信息...</span>
				<span><a href="javascript:void(0)" onclick="refreshChart('year');" style="text-decoration:none;color:#999">刷新</a></span>
			</div>
			<div style="width:100%">
				<div id="octchartContainer_year" style="float:right;width:87%;margin-right:5px;float:left"></div>
			</div>
        </div>
    </div>
    
	<div>
		<img src="images/welcome.jpg" width="100%" height="100%"/>
	</div>
	
	
</div>
<!-- 欢迎信息  end-->
</body>
</html>
